<template>
  <el-card>
    <el-upload class="upload-demo" drag action="" :http-request="handleUpload"
      accept=".ref,.*" :show-file-list="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">拖动文件到此处，或<em>点击上传</em></div>
      <!-- <template #tip>
        <div class="el-upload__tip">仅支持上传以.ref结尾的reftable文件</div>
      </template> -->
    </el-upload>
    <el-divider></el-divider>
    <el-table :data="fileList" :show-header="false" :highlight-current-row="true" @cell-click="handleFileClick" style="width: 100%">
      <el-table-column prop="label" label="文件名"></el-table-column>
    </el-table>
    <el-divider></el-divider>
    <div v-html="fileDesc" v-if="fileDesc" style="text-align: left;"></div>
  </el-card>
</template>

<script>
import axios from 'axios';
export default {
  props: {
    files: Array,
  },
  data() {
    return {
      fileList: [{
        label: '1. git-init.ref',
        url: "/examples/git-init.ref",
        description: '大小：1K<br>描述：执行git init生成的reftable文件',
        tag: "default",
      }, {
        label: '2. git-init-and-commit.ref',
        url: "/examples/git-init-and-commit.ref",
        description: '大小：1K<br>描述：执行git init和git commit生成的reftable文件',
        tag: "default",
      }, {
        label: '3. multi-log-blocks.ref',
        url: "/examples/multi-log-blocks.ref",
        description: '大小：9K<br>描述：该reftable文件包含多个log-block和1个ref-block',
        tag: "default",
      }, {
        label: '4. multi-ref-and-obj-blocks.ref',
        url: "/examples/multi-ref-and-obj-blocks.ref",
        description: '大小：153K<br>描述：该reftable文件包含多个ref-block和obj-block',
        tag: "default",
      }],
      fileMaping: {},
      fileDesc: "无描述信息",
    };
  },
  created() {
    console.log("mounted", this.fileMaping)
    for (let file of this.fileList) {
      this.fileMaping[file.label] = file;
    }
  },
   methods: {
    handleUpload(file) {      
      const reader = new FileReader();
      reader.onload = (e) => {
        this.fileMaping[file.file.name] = {
          label: file.file.name,
          raw: file.file,
          content: new Uint8Array(e.target.result),
        };
        console.log(e.target.result.content)
        this.fileList = Object.values(this.fileMaping);
        this.$emit('fileChanged', new Uint8Array(e.target.result));
        console.log(e.target.result);
      };
      reader.readAsArrayBuffer(file.file);
      return true;
    },
    
    async fetchBinaryFile(url) {
      try {
        const response = await axios.get(url, {
          responseType: 'arraybuffer'
        });
        return new Uint8Array(response.data);
      } catch (error) {
        console.error('Error fetching binary file:', error);
      }
      return new Uint8Array([])
    },

    handleFileClick(node) {
      if (node.url && !node.content) {
        let that = this;
        this.fetchBinaryFile(node.url).then(content => {
          console.log("that.fileMaping", that.fileMaping)
          that.fileMaping[node.label].content = content;
          that.fileDesc = node.description;
          that.$emit('fileChanged', content);
        });
      } else {
        this.fileDesc = node.description || `大小：${Math.floor(node.content.length / 1024)}K`;
        this.$emit('fileChanged', node.content);
      }      
    },
    
    loadFileByIndex(index) {
      if (this.fileList[index]) {
        this.handleFileClick(this.fileList[index]);
      }
    },

  },
  mounted() {

  },
  computed: {
    
  }
};
</script>